<template>
  <div>
    <el-form
      :inline="true"
      :model="formData"
      size="small"
      class="demo-form-inline"
    >
      <el-form-item prop="mobile" label="手机号码">
        <el-input
          v-model="formData.mobile"
          clearable
          placeholder="手机号码"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column prop="goodsUrl" label="商品主图" width="80">
        <template slot-scope="scope">
          <el-image
            :src="scope.row.goodsUrl"
            fit="cover"
            :preview-src-list="[scope.row.goodsUrl]"
            style="width: 40px; height: 40px"
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="goodsName" label="商品名称" width="220">
      </el-table-column>
      <el-table-column prop="mobile" label="手机号码" width="120">
      </el-table-column>
      <el-table-column prop="status" label="商品状态" width="100">
        <template slot-scope="scope">
          {{ scope.row.status | formatStatus }}
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" width="100">
      </el-table-column>
      <el-table-column prop="sale" label="商品销量" width="100">
      </el-table-column>
      <el-table-column prop="url" label="商品详情" width="100">
        <template slot-scope="scope">
          <i class="el-icon-picture" @click="details(scope.row)"></i>
        </template>
      </el-table-column>
      <el-table-column prop="goodsDesc" label="商品描述" width="400">
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            :disabled="scope.row.status !== 0"
            @click="goodsAudit(scope.row.id, 1, '是否同意商品审核？')"
            >通过</el-button
          >
          <el-button
            type="danger"
            size="mini"
            :disabled="scope.row.status !== 0"
            @click="goodsAudit(scope.row.id, 4, '是否拒绝商品审核？')"
            >拒绝</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog title="图片详情" :visible.sync="open" width="500" center>
      <el-image v-for="url in imgList" :key="url" :src="url" lazy></el-image>
    </el-dialog>
    <v-pagination :formData="formData" @load="getData"></v-pagination>
  </div>
</template>
<script>
import { queryGoodsList, goodsAudit } from "@/api/goodsManagement/goods";
import pagination from "@/components/pagination";
export default {
  components: {
    vPagination: pagination,
  },
  data() {
    return {
      loading: true,
      open: false,
      formData: {
        mobile: "",
        pageNo: 1,
        pageSize: 10,
        total: 0,
      },
      tableData: [],
      imgList: [],
    };
  },
  created() {
    this.getData();
  },
  filters: {
    formatStatus(state) {
      switch (state) {
        case 0:
          return "待审核";
          break;
        case 1:
          return "销售中";
          break;
        case 2:
          return "已下架";
          break;
        case 3:
          return "已锁定";
          break;
        case 4:
          return "拒绝通过";
          break;
        case 5:
          return "取消";
          break;
        default:
          return state;
          break;
      }
    },
  },
  methods: {
    details(row) {
      this.open = true;
      this.imgList = JSON.parse(row.url);
    },
    getData() {
      queryGoodsList(this.formData).then((res) => {
        this.loading = false;
        this.tableData = res.data.resultData.goodsList;
        this.formData.total = res.data.resultData.goodsCount;
      });
    },
    onSubmit() {
      this.formData.pageNo = 1;
      this.formData.pageSize = 10;
      this.formData.total = 0;
      this.getData();
    },
    goodsAudit(id, status, message) {
      this.$msgbox({
        title: status === 1 ? "通过" : "拒绝",
        message: message,
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            var data = {
              id: id,
              status: status,
            };
            instance.confirmButtonLoading = true;
            goodsAudit(data).then((res) => {
              instance.confirmButtonLoading = false;
              if (res.data.resultStatus) {
                done();
                this.$message.success(res.data.errorMessage);
                this.getData();
              }
            });
          } else {
            done();
          }
        },
      }).catch(() => {});
    },
  },
};
</script>
<style lang="less" scoped>
.el-icon-picture {
  height: 60px;
  width: 60px;
  font-size: 40px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
}
</style>